<template>
  <div v-transfer-dom>
  <popup v-model="showBank" position="bottom" @on-hide="close1">
    <popup-header
      left-text="取消"
      right-text="确定"
      @on-click-left="close1"
      @on-click-right="choose">
      </popup-header>
    <picker 
    :data="banks" 
    v-model="bank" 
    @on-change="change" 
    ></picker>
  </popup>
</div>
</template>
<script>
import { Popup,TransferDom,Picker,PopupHeader } from 'vux'

export default {
  components:{
    Popup,
    Picker,
    PopupHeader
  },
  directives: {
    TransferDom
  },
  created(){
  },
  props:['show1'],
  data(){
    return {
      banks:[
          ['中国工商银行','招商银行','中国农业银行','中国建设银行','中国银行','中国民生银行'],
        ],
      bank:[''],
      val:'',
      bankId:'',
    }
  },
  methods:{
    change(val){
      let bankId = this.banks[0].indexOf(val[0])+1
      // //console.log(bankId)
      // this.$emit('getBank',{
      //   val:val,
      //   bankId:bankId
      // })
      this.val = val;
      this.bankId = bankId
    },
    choose(){
      this.$emit('getBank',{
        val:this.val,
        bankId:this.bankId
      })
      this.close1()
    },
    close1(){
      this.$emit('close1',false)
    }
  },
  computed:{
    showBank:{
      get(){
        return this.show1
      },
      set(){

      }
    }
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';
  .vux-popup-header-right{
      color:#e64f2b !important;
    }
</style>
